<template>
    <div class="buy">
        <div class="search">
            <div class="label">全部</div>
            <div style="width:280px">
                <el-date-picker style="width:100%;box-sizing:border-box" 
                                v-model="dateRange" 
                                type="daterange" 
                                range-separator="To" 
                                start-placeholder="开始日期" 
                                end-placeholder="结束日期"></el-date-picker>

            </div>
        </div>
        <div class="list">
            <el-scrollbar v-if="list.data.length > 0">
                <div class="order-item" v-for="(item,index) in list.data" :key="index">
                    <div class="order-item-header">
                        <div class="text">订单号:{{item.purchase_no}}</div>
                        <div class="text">创建时间:{{item.create_at}}</div>
                    </div>
                    <div class="order-item-body">
                        <table>
                            <thead>
                                <tr>
                                    <th class="w192 left">订购服务</th>
                                    <th class="w120 left">订购时长</th>
                                    <th class="w120 center">支付方式</th>
                                    <th class="w120 right">订单金额</th>
                                    <th class="w120 center">订单状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="w192 left">{{item.level_name}}</td>
                                    <td class="w120 left">{{item.date_type_desc}}</td>
                                    <td class="w120 center">{{item.pay_type_desc}}</td>
                                    <td class="w120 right">￥{{item.pay_fee}}</td>
                                    <td class="w120 center">{{item.purchase_status_desc}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="order-item-footer">
                        <template v-if="item.purchase_status === 1">
                            <el-button v-if="!item.invoice_id" @click="openDialog(item.id)">申请发票</el-button>
                            <el-button v-else @click="viewInvoice(item.invoice_id)">查看发票</el-button>
                        </template>
                        <template v-if="item.purchase_status === 0">
                            <el-button @click="handleCancel(item.id)">取消订单</el-button>
                            <el-button type="primary">去支付</el-button>
                        </template>
                        <template v-if="item.purchase_status === 2">
                            <el-button @click="handleRePay(item)">重新订购</el-button>
                        </template>
                    </div>
                </div>
            </el-scrollbar>
            <el-empty description="暂无订购记录"></el-empty>
        </div>
        <invoice-dialog :dialog-visible="dialogVisible" 
                        :dialogViewVisible="dialogViewVisible" 
                        :id="invoiceId" 
                        :orderId="orderId"
                        @close="dialogVisible = false"
                        @viewClose="dialogViewVisible = false"
                        @goInvoice="goInvoice"></invoice-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { getMyOrderList,cancelOrder } from 'services/system'

import invoiceDialog from '../invoice-dialog'

import systemStore from '@/store/modules/system'

import { Table } from '@/model/system'

const emits = defineEmits(['goInvoice'])

const $systemStore = systemStore()

interface Order {
    id:number ,
    invoice_id:number ,
    purchase_no: string,
    create_at: string,
    level_name: string,
    date_type_desc: string,
    pay_type_desc: string,
    pay_type: number,
    pay_fee: number,
    purchase_status:number,
    purchase_status_desc:string
}

const dialogVisible = ref(false)

const dialogViewVisible = ref(false)

const dateRange = ref([])

const invoiceId = ref(0)

const orderId = ref(0)

const list = reactive<Table<Order>>({
    data:[],
    total:0,
    current_page:1,
    size:10
})

const getList = () => {
    let start_create_at = ''
    let end_create_at = ''
    if (dateRange.value) {
        if (dateRange.value[0]) {
            let t = new Date(dateRange.value[0])
            start_create_at = `${t.getFullYear()}-${t.getMonth() + 1}-${t.getDate()}`
        }

        if (dateRange.value[1]) {
            let t = new Date(dateRange.value[0])
            end_create_at = `${t.getFullYear()}-${t.getMonth() + 1}-${t.getDate()}`
        }
    }
    let params = {
        current_page: list.current_page,
        size: list.size,
        start_create_at:start_create_at,
        end_create_at:end_create_at
    }
    getMyOrderList(params).then(res => {
        list.data = res.list || []
        list.total = res.total
    })
}

const goInvoice = () => {
    dialogVisible.value = false
    emits('goInvoice')
}

const viewInvoice = (id:number) => {
    invoiceId.value = id
    dialogViewVisible.value = true
}

const openDialog = (id:number) => {
    orderId.value = id
    dialogVisible.value = true
}

const handleCancel = (id:number) => {
    cancelOrder({
        id
    }).then(res => {
        getList()
    })
}

const handleRePay = (item:any) => {
    $systemStore.getPayInfo(item.level_id)
}

watch(() => dateRange.value, (val) => {
    getList()
})


onMounted(() => {
    getList()
})

</script>
<style lang="scss" scoped>
.buy{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;

    .search{
        height: 32px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;

        .label{
            font-size: 16px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #303133;
            line-height: 24px;
        }
    }

    .list {
        flex: 1;
        height: 0;
        width: 100%;

        .order-item{
            border-radius: 12px;
            border:1px solid #f2f6fc;
            margin-bottom: 16px;
        }

        .order-item-header{
            height: 54px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 16px;
            font-size: 14px;
            font-weight: 400;
            color: #909399;
        }

        .order-item-body{
            table{
                width: 100%;
                word-wrap: break-word;
                word-break: break-all;
                border-collapse:collapse;

                tr{
                    height: 48px;
                    font-size: 14px;
                    
                    td,
                    th{
                        box-sizing: border-box;
                        padding:0 16px;
                    }
                }
                

                thead{
                    tr{
                        color: #909399;
                        background-color: #FAFAFA;
                    }
                }

                tbody{
                    tr{
                        color: #303133;
                        font-weight: 500;
                    }
                }
            }
        }

        .order-item-footer{
            height: 62px;
            width: 100%;
            box-sizing: border-box;
            padding: 16px;
            display: flex;
            justify-content: flex-end;
        }
    }

    .w192{
        width: 192px;
    }

    .w120{
        width: 120px;
    }

    .center{
        text-align: center;
    }

    .left{
        text-align: left;
    }

    .right{
        text-align: right;
    }
}
</style>